<template>
  <div id="MapEcharts" ref="map_ref" class="map"></div>
</template>

<script>
import * as echarts from "echarts";
import china from "@/assets/china.json";
import request from "@/util/request.js";

export default {
  name: "map_1",

  data() {
    return {
      time: null,
      chartInstance: null,
      geoCoordMap: {}, //地图坐标数据
      provinceData:[], //学生数据
    };
  },
  mounted() {
    this.getCount()
  },
  computed: {
  },
  methods: {
      getCount(){
        request.get("/info_account/getProvinceCount").then(res=>{
          this.provinceData.push(...res.data.data)
          this.initCoordMapData()
          this.initChart();
          this.getData();
        })
      },
    initCoordMapData(){
      const extractedData = {};
      china.features.forEach(feature => {
        extractedData[feature.properties.name] = feature.properties.center;
      });
      this.geoCoordMap=extractedData
    },
    initChart() {
      this.chartInstance = echarts.init(document.getElementById("MapEcharts"));
    },
    async getData() {
      await this.updateChart();
    },
    updateChart() {
      // 初始化中国地图
      echarts.registerMap("china", china);
      const geoCoordMap = this.geoCoordMap
      const data = this.provinceData
      function formtGCData(geoData, data, srcNam, dest) {
        var tGeoDt = [];
        if (dest) {
          for (var i = 0, len = data.length; i < len; i++) {
            if (srcNam !== data[i].name) {
              tGeoDt.push({
                coords: [geoData[srcNam], geoData[data[i].name]]
              });
            }
          }
        } else {
          for (var i = 0, len = data.length; i < len; i++) {
            if (srcNam !== data[i].name) {
              tGeoDt.push({
                coords: [geoData[data[i].name], geoData[srcNam]]
              });
            }
          }
        }
        return tGeoDt;
      }

      function formtVData(geoData, data, srcNam) {
        var tGeoDt = [];
        for (var i = 0, len = data.length; i < len; i++) {
          var tNam = data[i].name
          if (srcNam !== tNam) {
            tGeoDt.push({
              name: tNam,
              value: geoData[tNam]
            });
          }

        }
        tGeoDt.push({
          name: srcNam,
          value: geoData[srcNam],
          symbolSize: 8,
          itemStyle: {
            normal: {
              color: 'red',//中心点颜色
              borderColor: '#ffffff'
            }
          }
        });
        return tGeoDt;
      }

      //var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
      const planePath = 'arrow';

      let option = {

        // backgroundColor: '#ffffff',//图片背景
        tooltip: {
          trigger: "item"
        },
        geo: {
          map: "china",
          label: {
            emphasis: {
              show: false
            }
          },
          roam: false,
          silent: true,
          // top: "10%", // 调整地图位置
          // bottom: "10%",
          // left: "10%",
          // right: "10%", // 调整地图位置
          itemStyle: {
            normal: {
              areaColor: "#ffffff",
              borderColor: "#000"
            }
          }
        },
        title: {
          text: "山西工学院学生返校迁移",
          left: "center", // 调整标题位置
        },


        series: [{

          type: 'lines',
          zlevel: 2,
          effect: {
            show: true,
            period: 6,
            trailLength: 0.1,
            color: '#000000',//箭头颜色
            symbol: planePath,
            symbolSize: 8
          },
          lineStyle: {
            normal: {
              color: '#000000',//线颜色
              width: 1,
              opacity: 0.4,
              curveness: 0.2
            }
          },
          data: formtGCData(geoCoordMap, data, '山西省', true)//出发城市
        },
          {

            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 6,
              trailLength: 0.1,
              color: '#000000',//箭头颜色
              symbol: planePath,
              symbolSize: 8
            },
            lineStyle: {
              normal: {
                color: '#000000',//拖尾颜色
                width: 1,
                opacity: 0.4,
                curveness: 0.2
              }
            },
            data: formtGCData(geoCoordMap, data, '山西省', false)//到达地点
          },
          {

            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
              period: 4,
              scale: 2.5,
              brushType: 'stroke'
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                formatter: '{b}'
              }
            },
            symbolSize: 5,
            itemStyle: {
              normal: {
                color: '#000000',//城市点颜色
                borderColor: '#ffffff'
              }
            },

            data: formtVData(geoCoordMap, data, '山西省')//中心点红色
          }]
      };
      this.chartInstance.setOption(option);
    },
  }
};
</script>

<style scoped>
.map{
  width: 100%;
  height: 550px;
}
@media screen and (max-width: 1024px) {
  #MapEcharts {
    height: 80vw;
    width: 100%;
  }
}
</style>
